<template>
  <div class="block" :style="styles">
    <div class="angle angle_1" />
    <div class="angle angle_2" />
    <div class="angle angle_3" />
    <div class="angle angle_4" />
    <slot />
  </div>
</template>

<script>
export default {
  name: 'Block',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '265px'
    }
  },
  data() {
    return {}
  },
  computed: {
    styles() {
      const { width, height } = this
      return { width, height }
    }
  }
}
</script>

<style lang="scss" scoped>
.block {
  box-shadow: inset 0px 11px 46px 0px rgba(162, 229, 246, 0.2);
  border: 1px solid rgba(8, 95, 203, 0.42);
  position: relative;
  margin-bottom: 20px;

  .angle {
    width: 12px;
    height: 12px;
    border: solid 2px #1657bf;
    position: absolute;
    z-index: 10;
  }

  .angle_1 {
    border-bottom: 0;
    border-right: 0;
    top: -1px;
    left: -1px;
  }

  .angle_2 {
    border-bottom: 0;
    border-left: 0;
    top: -1px;
    right: -1px;
  }

  .angle_3 {
    border-top: 0;
    border-left: 0;
    bottom: -1px;
    right: -1px;
  }

  .angle_4 {
    border-top: 0;
    border-right: 0;
    bottom: -1px;
    left: -1px;
  }
}
</style>
